<template>
  <div class="content-box">
    <e-heading class="title" grade="1">赛事签表 
      <small v-if="playRound>2" 
        v-bind:class="{active:isSemifinal==false}" 
        @click="isSemifinal = false">
        大签表
      </small> 
      <small 
        v-if="playRound==7 || playRound==6 || playRound==5 || playRound==2" 
        v-bind:class="{active:isSemifinal==true}"  
        @click="isSemifinal = true">
        半决赛
      </small>
    </e-heading>

    <template v-if="bigTableVisible && (isSemifinal == false)" >
      <check-table
        :dataList="dataList"
        :roundList="roundList"
        :zoneNumber="zoneNumber"
        :areaIndex="areaIndex"
        @active="handleActive">
      </check-table>
    </template>

    <template  v-else>
      <semifinal :isPreview="true"  :dataList="semiList "></semifinal>
    </template>
    
    
    <div class="btn-wrap">
      <router-link :to="'/race/detail/manage/createsigntable?id='+ $route.query.id+'&tasktype='+ $route.query.tasktype+'&isRun='+ $route.query.isRun + '&isedit=yes&isTable=yes'">
        <el-button type="primary" size="large"> 修改签表 </el-button>
      </router-link>      
      <el-button  size="large" @click="buildSchedule()">
        创建赛程
      </el-button>
    </div>
  </div>
</template>

<script>
import Api from 'api/race'
import Semifinal from './components/Semifinal'
import CheckTable from './components/CheckTable'
import {calcRound, IsCupSeperate} from 'utils'
import {mapGetters} from 'vuex'
export default {
  components: {
    Semifinal,
    CheckTable
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail'
    }),
    IsCupSeperate () {
      return IsCupSeperate(this.race_detail)
    }
  },
  created () {
    this.getDrawData()
  },
  watch: {
    // 监听路由变化拉取参赛者要求信息
    '$route': 'getDrawData'
  },
  data () {
    return {
      isSemifinal: false,
      bigTableVisible: false, // 大签表是否显示
      scoreVisible: false,
      zoneNumber: 1, // 分区数量
      game: {},
      homeScore: '',
      guestScore: '',
      areaIndex: 0, // 分区id
      dataList: [], // 展示的签表
      semiList: [], // 半决赛列表
      roundList: [],
      checkTableList: [], // 所有的签表
      playRound: 2 // 比赛轮次
    }
  },
  methods: {
    calcRound () {
      this.roundList = calcRound(this.playRound)
    },
    handleActive (index) {
      this.areaIndex = index
      this.dataList = this.checkTableList[index].grades
      this.handleSort()
    },
    buildSchedule () {
      this.$confirm('确认生成赛程？', '温馨提示', {
        type: 'warning'
      }).then(() => {
        let query = this.IsCupSeperate ? Object.assign({}, this.$route.query, {useOld: 'no'}) : this.$route.query
        this.$router.push({
          path: '/race/detail/manage/generate',
          query: query
        })
      })
    },
    getDrawData () {
      Api.getDrawData({matchId: this.$route.query.id}).then((res) => {
        let list = res.data
        this.zoneNumber = list.length
        if (this.zoneNumber > 1) { // 有分区,球队>=32
          this.checkTableList = list
          if (list[4]) {
            this.playRound = list[4].grades[1].grade
            this.semiList = list[4].grades
          }
          this.isSemifinal = false
        } else {
          this.playRound = list[0].grades.length
          if (this.playRound === 2) { // 4支
            this.semiList = list[0].grades
            this.isSemifinal = true
          }
          if (this.playRound === 3) { // 8支
            this.isSemifinal = false
          }
          if (this.playRound === 4) { // 16支
            this.semiList = list[0].grades.filter(item => {
              return item.grade > 2
            })
          }
        }
        this.bigTableVisible = this.playRound > 2
        this.dataList = list[0].grades
        this.handleSort()
        this.areaIndex = 0
        this.calcRound()
      })
    },
    handleSort () {
      this.dataList.sort(function (a, b) {
        return a.grade - b.grade
      })
    }
  }
}
</script>

<style lang="scss" scoped>
 .title{
    small{
      font-size: 14px;
      color: #333;
      cursor: pointer;
      &.active{
        color:#00bb90;
      }
    }
  }
  .btn-wrap{
    margin: 20px 0;
    text-align: center;
  }
</style>
